<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="浏览记录" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		<view style="margin-bottom: 100rpx;" v-if="list.length > 0">
		
			<view class="history-item" v-for="(item,index) in list" :key="index">
					
				<image class="select" :src="item.checked ? selectPitchOn:selectDefault" 
					mode="widthFix" @click="chooseGoodsSelect(index)"></image>

				
				<image :src="item.img_url || errirImage" class="card_img"></image>
				
				<view class="flex-col text-col">
					<text>{{item.name}}</text>
					<view style="font-size:25rpx;margin-top:6rpx">{{item.title}}</view>
					<text style="color: #5c8edc;margin-top: 6rpx;">¥{{item.sell_price}}</text>
				</view>
				
			</view>
		
		
		
			<view class="bottom-lay">
				<u-button type="success" shape="circle" text="删除" @click="handleConfirm"></u-button>
			</view>
		</view>
		
		
		<view v-else class="flex-col items-center" style="margin-top: 80rpx;">
			<image src="/static/data_empty.png"></image>
			<text style="color: #c0c4cc;">暂无数据</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				errirImage: '/static/cart/error_img.png',
				selectDefault: '/static/cart/shop_unselect.png', // 默认图标
				selectPitchOn: '/static/cart/shop_select.png', // 选中图标
			};
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		onLoad() {
			this.getHistoryList();
		},
		methods:{
			///删除
			handleConfirm(){
				let selectList = [];
				this.list.forEach(item =>{
					if(item.checked){
						selectList.push(item.id)
					}
				});
				
				if(selectList.length == 0){
					this.$u.toast('请选择删除项')
					return;
				}
				this.$request({
					url:'?c=User&a=delBrowsingHistory',
					type:'post',
					data:{
						ids:selectList.join(',')
					}
				}).then(res =>{
					uni.showToast({
						title:'删除成功'
					})
					this.getHistoryList();
				})
			},
			///点击选择
			chooseGoodsSelect(val){
				 this.list = this.list.map((item,index) => {
				  if (index === val) {
					return { ...item, checked: !item.checked };
				  }
				  return item;
				});
			},
			
			getHistoryList(){
				this.$request({
					url:'?c=User&a=browsingHistory',
					type:'post'
				}).then(res =>{
					if(res.data != null){
						this.list = res.data;
						this.list.forEach(item =>{
							item.checked = false
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
}
.history-item{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10rpx;
	width: 100%;
}
.select{
	width: 40rpx;
	height: 40rpx;
}
.card_img{
	width: 180rpx;
	height: 180rpx;
	border-radius: 8rpx;
	margin-left: 20rpx;
}
.text-col{
	margin-left: 20rpx;
	margin-right: 20rpx;
	width: 60%;
	overflow: hidden;
}
.bottom-lay{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100rpx;
	width: 100%;
	padding-left: 40rpx;
	padding-right: 40rpx;
	text-align: center;
	background-color: #fff;
	align-items: center;
}
</style>
